<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>About — <{:C('site_title')}></title>
<meta name="keywords" content="<{:C('site_keyword')}>">
<meta name="description" content="<{:C('site_content')}>">
<include file="Public:cssjs" />
<link rel="stylesheet" href="<{:RES}>/css/in.css">
</head>
<body>
<include file="Public:mobilemenu" />

<div id="siteWrapper">	
	<include file="Public:menu" />
	<div class="aboutBanner">
		<img src="<{:RES}>/image/about.jpg" class="banner-image" />
		<div class="mask"></div>
	</div>
	
	<div class="main">
		<div class="onepage"><{$list.content|htmlspecialchars_decode=###}></div>
	</div>

	<include file="Public:footer" />	
</div>
<script>
$(window).load(function() {
   changeImage();
   $(window).resize(function(){
   	 changeImage();
   })
});

function changeImage(){
	var scrWidth = $(window).width();
	var scrHeight = $(".aboutBanner").height();
	var o = $(".banner-image");
	var imgWidth = o.width();
	var imgHeight = o.height();

	scr_b = scrWidth/scrHeight;
	img_b = imgWidth/imgHeight;

	if (scr_b > img_b){
		imgWidth = scrWidth;
  		o.width(scrWidth);
  		o.height("auto");
	}else{
		imgHeight = scrHeight;
  		o.height(scrHeight);
  		o.width("auto");
	}
	
  	var _x = (scrWidth - o.width())/2;
  	var _y = (scrHeight - o.height())/2;
  	o.css({'left':_x,'top':_y});	  	

}
</script>
</body>
</html>